<template>
  <div>
    <div v-if="hidden == '1'">
      <!-- 第一行 -->
      <el-row :gutter="10">
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <span class="spanLift">国家地区</span>
            <span class="spanRight">中国</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <span class="spanLift">国家地区</span>
            <span class="spanRight">中国</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <span class="spanLift">国家地区</span>
            <span class="spanRight">中国</span>
          </div>
        </el-col>
      </el-row>
      <!-- 第二行 -->
      <el-row :gutter="10">
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <span class="spanLift bgcNone">国家地区</span>
            <span class="spanRight">中国</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <span class="spanLift bgcNone">国家地区</span>
            <span class="spanRight">中国</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <span class="spanLift bgcNone">国家地区</span>
            <span class="spanRight">中国</span>
          </div>
        </el-col>
      </el-row>
      <!-- 第三行 -->
      <el-row :gutter="10">
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <span class="spanLift">国家地区</span>
            <span class="spanRight">中国</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <span class="spanLift">国家地区</span>
            <span class="spanRight">中国</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <span class="spanLift">国家地区</span>
            <span class="spanRight">中国</span>
          </div>
        </el-col>
      </el-row>
      <!-- 第四行 -->
      <el-row :gutter="10">
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <span class="spanLift bgcNone">国家地区</span>
            <span class="spanRight">中国</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <span class="spanLift bgcNone">国家地区</span>
            <span class="spanRight">中国</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <span class="spanLift bgcNone">国家地区</span>
            <span class="spanRight">中国</span>
          </div>
        </el-col>
      </el-row>
      <!-- 第五行 -->
      <el-row :gutter="10">
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <span class="spanLift">国家地区</span>
            <span class="spanRight">中国</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <span class="spanLift">国家地区</span>
            <span class="spanRight">中国</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <span class="spanLift">国家地区</span>
            <span class="spanRight">中国</span>
          </div>
        </el-col>
      </el-row>
      <!-- 第六行 -->
      <el-row :gutter="10">
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <span class="spanLift bgcNone">国家地区</span>
            <span class="spanRight">中国</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <span class="spanLift bgcNone">国家地区</span>
            <span class="spanRight">中国</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <span class="spanLift bgcNone">国家地区</span>
            <span class="spanRight">中国</span>
          </div>
        </el-col>
      </el-row>
      <!-- 第七行 -->
      <el-row :gutter="10">
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <span class="spanLift">国家地区</span>
            <span class="spanRight">中国</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <span class="spanLift">国家地区</span>
            <span class="spanRight">中国</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <span class="spanLift">国家地区</span>
            <span class="spanRight">中国</span>
          </div>
        </el-col>
      </el-row>
      <!-- 第八行 -->
      <el-row :gutter="10">
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <span class="spanLift bgcNone">国家地区</span>
            <span class="spanRight">中国</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <span class="spanLift bgcNone">国家地区</span>
            <span class="spanRight">中国</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <span class="spanLift bgcNone">国家地区</span>
            <span class="spanRight">中国</span>
          </div>
        </el-col>
      </el-row>
    </div>
    <div v-if="hidden == '2'">
      <!-- 第一行 -->
      <el-row :gutter="10">
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <span class="spanLift">特殊工种</span>
            <span class="spanRight">高危户外</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <span class="spanLift">特殊工种</span>
            <span class="spanRight">高危户外</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <span class="spanLift">特殊工种</span>
            <span class="spanRight">高危户外</span>
          </div>
        </el-col>
      </el-row>
      <!-- 第二行 -->
      <el-row :gutter="10">
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <span class="spanLift bgcNone">特殊工种</span>
            <span class="spanRight">高危户外</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <span class="spanLift bgcNone">特殊工种</span>
            <span class="spanRight">高危户外</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <span class="spanLift bgcNone">特殊工种</span>
            <span class="spanRight">高危户外</span>
          </div>
        </el-col>
      </el-row>
      <!-- 第三行 -->
      <el-row :gutter="10">
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <span class="spanLift">特殊工种</span>
            <span class="spanRight">高危户外</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <span class="spanLift">特殊工种</span>
            <span class="spanRight">高危户外</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <span class="spanLift">特殊工种</span>
            <span class="spanRight">高危户外</span>
          </div>
        </el-col>
      </el-row>
      <!-- 第四行 -->
      <el-row :gutter="10">
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <span class="spanLift bgcNone">特殊工种</span>
            <span class="spanRight">高危户外</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <span class="spanLift bgcNone">特殊工种</span>
            <span class="spanRight">高危户外</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <span class="spanLift bgcNone">特殊工种</span>
            <span class="spanRight">高危户外</span>
          </div>
        </el-col>
      </el-row>
      <!-- 第五行 -->
      <el-row :gutter="10">
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <span class="spanLift">特殊工种</span>
            <span class="spanRight">高危户外</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <span class="spanLift">特殊工种</span>
            <span class="spanRight">高危户外</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <span class="spanLift">特殊工种</span>
            <span class="spanRight">高危户外</span>
          </div>
        </el-col>
      </el-row>
      <!-- 第六行 -->
      <el-row :gutter="10">
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <span class="spanLift bgcNone">特殊工种</span>
            <span class="spanRight">高危户外</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <span class="spanLift bgcNone">特殊工种</span>
            <span class="spanRight">高危户外</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <span class="spanLift bgcNone">特殊工种</span>
            <span class="spanRight">高危户外</span>
          </div>
        </el-col>
      </el-row>
      <!-- 第七行 -->
      <el-row :gutter="10">
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <span class="spanLift">特殊工种</span>
            <span class="spanRight">高危户外</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <span class="spanLift">特殊工种</span>
            <span class="spanRight">高危户外</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <span class="spanLift">特殊工种</span>
            <span class="spanRight">高危户外</span>
          </div>
        </el-col>
      </el-row>
      <!-- 第八行 -->
      <el-row :gutter="10">
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <span class="spanLift bgcNone">特殊工种</span>
            <span class="spanRight">高危户外</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <span class="spanLift bgcNone">特殊工种</span>
            <span class="spanRight">高危户外</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <span class="spanLift bgcNone">特殊工种</span>
            <span class="spanRight">高危户外</span>
          </div>
        </el-col>
      </el-row>
    </div>
      <div v-if="hidden == '3'">
          <!-- 第一行 -->
          <el-row :gutter="10">
              <el-col :span="8">
                  <ep-title>新办法计算待遇</ep-title>
                  <div class="grid-content bg-purple">
                      <span class="spanLift">基础养老金</span>
                      <span class="spanRight">2000</span>
                  </div>
              </el-col>
              <el-col :span="8">
                  <ep-title>老办法计算待遇</ep-title>
                  <div class="grid-content bg-purple">
                      <span class="spanLift">基础养老金</span>
                      <span class="spanRight">2000</span>
                  </div>
              </el-col>
              <el-col :span="8">
                  <ep-title>新老对比实际</ep-title>
                  <div class="grid-content bg-purple">
                      <span class="spanLift">新老对比后养老金</span>
                      <span class="spanRight">2000</span>
                  </div>
              </el-col>
          </el-row>
          <!-- 第二行 -->
          <el-row :gutter="10">
              <el-col :span="8">
                  <div class="grid-content bg-purple">
                      <span class="spanLift bgcNone">个人账户养老金</span>
                      <span class="spanRight">2000</span>
                  </div>
              </el-col>
              <el-col :span="8">
                  <div class="grid-content bg-purple">
                      <span class="spanLift bgcNone">个人账户养老金</span>
                      <span class="spanRight">2000</span>
                  </div>
              </el-col>
              <el-col :span="8">
                  <div class="grid-content bg-purple">
                      <span class="spanLift bgcNone">过渡性调节金</span>
                      <span class="spanRight">2000</span>
                  </div>
              </el-col>

          </el-row>
          <!-- 第三行 -->
          <el-row :gutter="10">
              <el-col :span="8">
                  <div class="grid-content bg-purple">
                      <span class="spanLift">过渡性养老金</span>
                      <span class="spanRight">2000</span>
                  </div>
              </el-col>
              <el-col :span="8">
                  <div class="grid-content bg-purple">
                      <span class="spanLift">过渡性养老金</span>
                      <span class="spanRight">2000</span>
                  </div>
              </el-col>
              <el-col :span="8">
                  <div class="grid-content bg-purple">
                      <span class="spanLift">月应发基本养老金</span>
                      <span class="spanRight">2000</span>
                  </div>
              </el-col>
          </el-row>
          <!-- 第四行 -->
          <el-row :gutter="10">
              <el-col :span="8">
                  <div class="grid-content bg-purple">
                      <span class="spanLift bgcNone">月基本养老金</span>
                      <span class="spanRight">2000</span>
                  </div>
              </el-col>
              <el-col :span="8">
                  <div class="grid-content bg-purple">
                      <span class="spanLift bgcNone">月基本养老金</span>
                      <span class="spanRight">2000</span>
                  </div>
              </el-col>
              <el-col :span="8">
                  <div class="grid-content bg-purple">
                      <span class="spanLift bgcNone">当年最低养老待遇水平</span>
                      <span class="spanRight">2000</span>
                  </div>
              </el-col>
          </el-row>
          <el-row :gutter="10">
              <el-col :span="8">
                  <div class="grid-content bg-purple">
                      <span class="spanLift bgcNone"></span>
                      <span class="spanRight"></span>
                  </div>
              </el-col>
              <el-col :span="8">
                  <div class="grid-content bg-purple">
                      <span class="spanLift bgcNone"></span>
                      <span class="spanRight"></span>
                  </div>
              </el-col>
              <el-col :span="8">
                  <div class="grid-content bg-purple">
                      <span class="spanLift">月核定基本养老金</span>
                      <span class="spanRight">{{myData.xbfylj.value}}</span>
                  </div>
              </el-col>
          </el-row>
      </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {
    myData: {
      type: Object,
      default: function() {
        return {};
      }
    },
    hidden:{
        type:String,
        default:""
    }
  },
  created() {

  }
};
</script>

<style lang="less" scoped>
.el-row {
  &:last-child {
    margin-bottom: 0;
  }
}

.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  border: 1px solid #e1e1e1;
  border-bottom: none;
  height: 50px;
  border-radius: 0;
  span {
    line-height: 50px;
    text-align: right;
  }
  .spanLift {
    height: 50px;
    width: 150px;
    float: left;
    background-color: #eef8fc;
    padding-right: 10px;
    box-sizing: border-box;
    border-right: 1px solid #e1e1e1;
  }
  .bgcNone {
    background-color: #fff;
  }
  .spanRight {
    padding-left: 90px;
      color:#f56c6c;
  }
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>


